<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>其他表单元素</title>
</head>
<body>

	<!-- 点击提交时，下拉列表子元素 option 如果没有设置 value ，参数为 fruit=苹果；设置 value 参数 ，参数为 sport=1，此时的 url 为 https://www.baidu.com/?fruit=苹果&sport=1 -->
	<form name="other" method="get" action="http://www.baidu.com" target="_blank">
	    <select name="fruit">
	    	<optgroup label="水果">
		        <option>苹果</option>
		        <option>橘子</option>
		        <option>香蕉</option>
		    </optgroup>

		    <optgroup label="蔬菜">
		        <option>黄瓜</option>
		        <option selected>白菜</option>
		        <option>土豆</option>
		    </optgroup>
		</select>
		<select name="sport">
	        <option value="1">篮球</option>
	        <option value="2">足球</option>
	        <option value="3">羽毛球</option>
		</select>


		<!-- 多行文本框，添加提示信息，但是要注意在 </textarea> 之前不能有空格，否则不能正确显示 -->
		<textarea name="suggest" placeholder="快快留下您的建议吧" ></textarea>


		<!-- 输入验证 -->
		<fieldset>
			必须填写一个值 <input type="text" required> <br>
			限定在某一个范围内 <input type="number" min="12" max="89"> <br>
			使用正则表达式 <input type="text" placeholder="请输入区号+座机" pattern="^[\d]{2,4}\-[\d]{6,8}$"> <br>
			禁止表单验证 <from action="http://www.baidu.com" novalidate>
		</fieldset>

		<button> 提交 </button>
	</form>
	<!-- 计算结果 -->
	<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
		<input type="number" id="num1"> * <input type="number" id="num2">
		<output for="num1 num2" name="res">
	</form>


</body>
</html>